import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'
import global from '../../global';
import { Textarea, Button, Map, Swiper, SwiperItem, Picker, Input, Image } from '@tarojs/components'
import Request from "../../api";
import Event from "../../event";
export default class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cars: []
    };
    this.statusMap = {
      '3': {
        label: '未通过',
        color: 'red'
      },
      '1': {
        label: '审核中',
        color: 'orange'
      },
      '2': {
        label: '认证通过',
        color: 'green'
      },
      '4': {
        label: '已废弃',
        color: 'red'
      }
    }
    this.loadCars = this.loadCars.bind(this);
    this.deleteCar = this.deleteCar.bind(this);
  }

  componentWillMount () {
    this.loadCars();
    Event.on('updateList', this.loadCars)
  }

  componentWillUnmount () { }

  componentDidHide () { }

  async loadCars() {
    try {
      let res = await Request.get('/business/auth_binding/list?wxUserId=' + global.userInfo.userId);
      if (res.data.code !== 200) {
        throw new Error(res.data.msg);
      }
      this.setState({
        cars: res.data.rows
      })
    } catch (e) {
      await Taro.showModal({
        title: e.toString()
      })
    }
  }

  async deleteCar(item) {
    await Taro.showLoading({
      title: '刪除中...'
    });
    try {
      let res = await Request.delete('/business/auth_binding/' + item.bindingId);
      if (res.data.code !== 200) {
        throw new Error();
      }
      await Taro.hideLoading();
      await Taro.showToast({
        title: '移除成功',
        type: 'success'
      })
      await this.loadCars();
    } catch (e) {
      await Taro.hideLoading();
      await Taro.showToast({
        title: '移除失败请重试',
      })
      console.log('删除认证小区数据失败')
    } finally {
      Taro.hideLoading();
    }
  }

  render () {

    let  {cars} = this.state;
    return (
      <View className='cars_list'>
        {
          cars.length !== 0 ? cars.map(item => {
            return (
              <View className='cars_item' onClick={() => {
                global.currentAuthInfo = item;
                Taro.navigateTo({url: '/pages/binding/index'})
              }}>
                <Image src={require('./img/cars.png')}/>
                <View className={'info'}>
                  <Text>{item.villageName}</Text>
                  <Text>{item.buildingName} {item.unitName} {item.houseName}</Text>
                </View>
                <View className={'status'}>
                  <Text style={{color: this.statusMap[item.status]['color']}}>{this.statusMap[item.status]['label']}</Text>
                  {
                    item.status === '3' && <Text className='iconfont icon-ashbin size40 color-red' onClick={async (e) => {
                      e.stopPropagation();
                      await Taro.showModal({
                        title: '提示',
                        content: '确定移除么？',
                        success: () => this.deleteCar(item)
                      })
                    }}/>
                  }
                </View>
              </View>
            );
          })
            :
            <View className='message_container'>
              暂无认证信息，<Text onClick={() =>
            {
              global.currentAuthInfo = null;
              Taro.navigateTo({url: '/pages/binding/index'})
            }}>点击新增</Text>
            </View>
        }
        {
          cars.length !== 0 && <View className='cars_item add_btn' onClick={() => {
            global.currentAuthInfo = null;
            Taro.navigateTo({url: '/pages/binding/index'})
          }}>
            <Text className='iconfont icon-add size50 color-grey'/>
          </View>
        }
      </View>
    )
  }
}
